<template>
	<div class="content">
		<div class="flex borderea box-align-center" style="height: 50px">
			<div class="title flex-1">前瞻性项目动态</div>
			<div class="flex">
				<div v-if="bzactivetype == 0" class="tabbj flex box-align-center">
					<span v-for="(value, index) in bzyearlist" :key="index" :class="{ active: bzactiveyear === index }" @click="bzyearchange(index, value)">{{
						value
					}}</span>
				</div>

				<div class="tabbj ml10 flex box-align-center">
					<span v-for="(value, index) in typelist" :key="index" :class="{ active: bzactivetype === index }" @click="bztypechange(index)">{{
						value
					}}</span>
				</div>
			</div>
		</div>

		<!-- 图表 -->
		<div v-if="bzactivetype === 0" class="parent mt10 flex flex-align-center">
			<div ref="chartRefbzgl" style="width: 100%; height: 100%"></div>
		</div>

		<!-- 表格 -->
		<div v-if="bzactivetype === 1" class="parent1 mt10">
			<DynamicTable :x-legend="bzgltablelegendx" :y-legend="bzgltablelegendy" :values="bzgltablevalues" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { min } from 'xe-utils'
import * as echarts from 'echarts'
import moment from 'moment'
import DynamicTable from './DynamicTable.vue'
import { countChartDynamicForwardLookingProjectApi, countFormDynamicForwardLookingProjectApi } from '@/api/statistica'
const bzactivetype = ref(0)
const bzactiveyear = ref(0)
const typelist = ref(['图表', '表格'])
const currentYear = moment().year()
const bzyearlist = Array.from({ length: 4 }, (_, index) => currentYear - index)
const loading = ref(false)
const chartRefbzgl = ref(null)
let chartInstancebzgl: echarts.ECharts | null = null

// 示例数据
const bzglchartsdata = {
	categories: [],
	series: []
}
const bzgltablevalues = ref([])
const bzgltablelegendx = ref([])
const bzgltablelegendy = ref([])
const biaozhunform = ref({
	completed: '',
	progressProject: '',
	published: ''
})

// 初始化图表
const initChart = () => {
	if (!chartRefbzgl.value) {
		return
	}
	chartInstancebzgl = echarts.init(chartRefbzgl.value)
	const option = {
		title: {
			text: '',
			left: 'center'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'shadow' },
			formatter: params => `${params[0].name}: ${params[0].value}`
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '1%',
			top: '20%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: chartData.value.map(item => item.category),
			axisLabel: { interval: 0 }
		},
		yAxis: {
			type: 'value',
			min: 0,
			max: Math.max(...chartData.value.map(item => item.value[0])) + 10
		},
		series: [
			{
				name: '数量',
				type: 'bar',
				data: chartData.value.map(item => item.value[0]),
				itemStyle: {
					color: params => {
						const colors = ['#1491FF ']
						return colors[params.dataIndex % colors.length]
					}
				},
				label: { show: true, position: 'top' }
			}
		]
	}
	chartInstancebzgl.clear()
	chartInstancebzgl.setOption(option)
}

// 响应式调整图表大小
const resizeChart = () => {
	chartInstancebzgl?.resize()
}
const chartData = ref([])
const legends = ref([])
onMounted(() => {
	window.addEventListener('resize', resizeChart)
	countChartDynamicForwardLookingProjectApi(bzyearlist[0]).then(res => {
		chartData.value = res.data.values
		legends.value = res.data.legends
	})
	setTimeout(() => {
		nextTick(() => {
			initChart()
		})
	}, 800)
})

// 转换函数
const transformToSeries = (legends, values) => {
	return legends.map((legend, legendIndex) => ({
		name: legend,
		data: values.map(item => item.value[legendIndex])
	}))
}
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart)
	chartInstancebzgl?.dispose()
})

const bzyearchange = (index: number, val: any) => {
	bzactiveyear.value = index
	window.removeEventListener('resize', resizeChart)
	chartInstancebzgl?.dispose()
	if (bzactivetype.value === 0) {
		countChartDynamicForwardLookingProjectApi(val).then(res => {
			chartData.value = res.data.values
			legends.value = res.data.legends
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		countFormDynamicForwardLookingProjectApi().then(res => {
			bzgltablelegendx.value = res.data.xlegend
			bzgltablelegendy.value = res.data.ylegend
			bzgltablevalues.value = res.data.values
		})
	}
}
const bztypechange = (index: number) => {
	window.removeEventListener('resize', resizeChart)
	chartInstancebzgl?.dispose()
	bzactivetype.value = index
	if (index === 0) {
		countChartDynamicForwardLookingProjectApi(bzyearlist[bzactiveyear.value]).then(res => {
			chartData.value = res.data.values
			legends.value = res.data.legends
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		countFormDynamicForwardLookingProjectApi().then(res => {
			bzgltablelegendx.value = res.data.xlegend
			bzgltablelegendy.value = res.data.ylegend
			bzgltablevalues.value = res.data.values
		})
	}
}
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.parent1 {
	overflow-x: auto;

	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */

	&::-webkit-scrollbar {
		display: none;
	}
}

.tabbj {
	background-color: #f5f6fa;

	border-radius: 3px;
	color: #333;
	padding: 4px 0px;

	span {
		padding: 3px 5px;
		border-radius: 3px;
		margin: 0 3px;

		cursor: pointer;
		transition: all 0.3s ease;
		/* 添加过渡动画 */
	}

	.active {
		background-color: #fff;

		/*transform: translateY(-3px);*/
		color: #1491ff;
		/* 轻微上浮效果 */

		/* 阴影动画 */
	}
}

.paddingbottom10 {
	padding-bottom: 10px;
}

.borderea {
	border-bottom: solid 1px #ebeef5;
}

.parent {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */
}

.parent1 {
	display: flex;

	/* 允许换行 */
	gap: 10px;
	height: 100%;
	flex-direction: column;
	/* 子元素间距 */
}

.child {
	flex: 0 1 calc(50% - 10px);
	/* 撑满父元素宽度的一半，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	box-sizing: border-box;
	/* 包含 padding 和 border */
	padding: 15px 10px;
	background: #fafafc;
	border-radius: 5px;
	display: flex;

	align-items: center;
}

.child1 {
	flex: 1;
	/* 撑满父元素宽度的一半，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	box-sizing: border-box;
	/* 包含 padding 和 border */
	padding: 15px 10px;
	background: #fafafc;
	border-radius: 5px;
	display: flex;

	align-items: center;
}

.parenttitle {
	font-size: 14px;
	font-weight: 500;
	color: #666;
}

.parennumber {
	font-size: 12px;

	color: #333;

	span {
		font-size: 15px;
		font-weight: 600;
	}
}

/* font-family: Arial, sans-serif; */
</style>
